<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #nav {
            line-height: 72px;
            list-style-type: none;
            color: #ffffff
        }

        #nav a {
            display: block;
            width: 150px;
            text-align: center;
            height: 72px;
            color: #ffffff
        }

        #nav a:link {
            text-decoration: none;
        }

        #nav a:visited {
            text-decoration: none;
        }

        #nav a:hover {
            text-decoration: none;
            font-weight: bold;
        }

        #nav li {
            float: left;
            width: 150px;
            color: #ffffff
        }

        #nav li a:hover {
            background: #224ea8;
        }

        #nav li ul,
        #nav li ul li ul {
            line-height: 40px;
            list-style-type: none;
            text-align: left;
            left: -999em;
            width: 180px;
            position: absolute;
            z-index: 999;
        }

        #nav li ul li,
        #nav li ul li ul li {
            float: left;
            width: 150px;
            background: #003366;
        }


        #nav li ul a,
        #nav li ul li ul a {
            display: block;
            width: 150px;
            text-align: left;
            padding-left: 24px;
            overflow: hidden;
            height: 40px;
        }


        #nav li ul a:link,
        #nav li ul li ul a:link {
            text-decoration: none;
        }

        #nav li ul a:visited,
        #nav li ul li ul a:visited {
            text-decoration: none;
        }

        #nav li ul a:hover,
        #nav li ul li ul a:hover {
            text-decoration: none;
            font-weight: normal;
            background: #224ea8;
        }


        #nav li:hover ul {
            left: auto;
        }

        #nav li ul li:hover ul {
            left: 150px;
            margin-top: -40px;
        }
    </style>






</head>

<body>
    <ul id="nav">
        <li class=""><a>一级菜单1</a>
            <ul>
                <li><a>二级菜单1</a></li>
                <li><a>二级菜单2</a></li>
                <li><a>二级菜单3</a></li>
                <li><a>二级菜单4</a></li>
                <li class=""><a>二级菜单5</a>
                    <ul>
                        <li><a>三级菜单1</a></li>
                        <li><a>三级菜单2</a></li>
                    </ul>
                </li>
                <li class=""><a>二级菜单6</a>
                    <ul>
                        <li><a>三级菜单3</a></li>
                        <li><a>三级菜单4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class=""><a>一级菜单</a>
            <ul>
                <li><a>二级菜单11</a></li>
                <li><a>二级菜单12</a></li>
                <li><a>二级菜单13</a></li>
                <li><a>二级菜单14</a></li>
                <li><a>二级菜单15</a></li>
                <li><a>二级菜单16</a></li>
            </ul>
        </li>
        <li class=""><a>一级菜单</a>
            <ul>
                <li><a>二级菜单21</a></li>
                <li><a>二级菜单22</a></li>
                <li><a>二级菜单23</a></li>
                <li><a>二级菜单24</a></li>
            </ul>
        </li>
        <li class=""><a>一级菜单</a>
            <ul>
                <li><a>二级菜单31</a></li>
                <li><a>二级菜单32</a></li>
                <li><a>二级菜单33</a></li>
                <li><a>二级菜单34</a></li>
            </ul>
        </li>
        <li class=""><a>一级菜单</a>
            <ul>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
            </ul>
        </li>
        <li class=""><a>一级菜单</a>
            <ul>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
                <li><a>二级菜单</a></li>
            </ul>
        </li>
    </ul>

</body>

</html>